<template>
  <div class="index-body">
    <!--头部 start-->
    <canter-header></canter-header>
    <!--头部 end-->
    <div class="index-con">
      <div class="index-box">
        <h2 class="classify-title"><span class="grayColor" @click="goBack_btn">应用中心</span><em>&gt;</em>智齿客服</h2>
        <div class="empower-box">
          <h2 class="empower-title">插件安全授权登录</h2>
          <div class="empower-l">
            <div class="empower-l-box">
              <img class="empower-l-img" src="../../assets/img/zc1.png"/>
              <span  class="empower-l-title">智齿客服</span>
              <span  class="empower-l-details">*智齿客服插件内含付费功能</span>
            </div>
          </div>
          <div class="empower-r">
            <div class="empower-r-box">
              <!--已授权显示  start-->
              <div class="ready">
                <em class="iconfont">&#xe608;</em>
                <span class="readyTitle">已授权，正在跳转</span>
              </div>
              <!--已授权显示  end-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="index-footer">
      <p>云商-移动供应链电商平台</p>
    </div>
  </div>
</template>
<script>
  import canterHeader from '../../components/header/canterHeader'
  export default{
    components:{
      canterHeader,
    },
    data(){
      return{
        empowerShow:false,   //跳转条件
      }
    },

    watch:{
      empowerShow:function (val,oldVal) {
        setTimeout(()=> {
            if (val) {
                this.getLoginUrl();
            }
        },1000)
      }
    },

    methods:{

      //获取地方登陆url
      getLoginUrl(){
        this.axios({
          method:"GET",
          url:"/v3/zhichi/getLoginUrl",
          data:{},
        }).then((res) =>{
          this.$router.push({path:"/zcService"});
          window.open(res.data.url);
        }).catch((err) =>{
          this.Public.openError(this,err.response.data)
        });
      },

      //点击返回应用中心
      goBack_btn(){
        this.$router.push({path:"/centerIndex"})
      },
    },
    created(){
      this.empowerShow = localStorage.getItem("empowerShow");
    },

    destroyed(){
      this.empowerShow = false;
    },

  }
</script>
<style scoped>

  .gray{
    background: #eeeeee!important;
  }

  /*已授权的样式  start*/
  .ready em{
    font-size: 100px!important;
    color: #008000;
  }

  .ready{
    overflow: hidden;
    margin-top: 5px;
    padding-left: 50px;
  }

  .readyTitle{
    display: block;
    color: #008000;
    font-size: 16px;
  }
  /*已授权的样式  end*/

  .empower-r{
    float: left;
    width: 60%;
    overflow: hidden;
    padding: 55.5px 0 0 0px;
  }

  .empower-l-details{
    display: block;
    text-align: center;
    color: #999999;
  }

  .empower-l-title{
    display: block;
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
  }

  .empower-l-img{
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }

  .empower-l-box{
    width: 50%;
    margin:  0 auto;
  }

  .empower-r-box{
    width: 70%;
    margin:  0 auto;
    padding-left: 20%;
  }

  .empower-l{
    float: left;
    width: 40%;
    padding-top: 114px;
  }

  .empower-title{
    height: 74px;
    line-height: 74px;
    border-bottom: 1px #dddddd solid;
    font-size: 18px;
    font-weight: normal;
  }

  .empower-box{
    width: 96%;
    padding: 0 2%;
    height: 440px;
    border: 1px #dddddd solid;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    margin-top: 30px;
    background: white;
  }

  .index-footer{
    height: 80px;
    line-height: 80px;
  }

  .index-footer p{
    text-align: center;
  }

  .classify-title{
    height: 60px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: normal;
    line-height: 60px;
    border-bottom: 1px solid #ddd;
    color: #555555;
  }

  .classify-title em{
    font-size: 12px;
    margin: 0 4px;
    color: #999999;
  }

  .grayColor{
    color: #999999;
    cursor: pointer;
  }

  .gray:hover{
    color: #888888;
  }

  .index-box{
    width: 1000px;
    padding: 0 10px;
    margin: 0 auto;
    overflow: hidden;
  }

  .index-con{
    overflow: hidden;
    width: 100%;
  }

  .index-body{
    padding-top: 80px;
    background: #f5f5f5;
    overflow: hidden;
  }

</style>
